layui框架实战案例(19)：layui

2023-03-11 11:08| 来源: 网络整理| 查看: 265

系列文章目录 layui动态表格翻页和搜索的代码分析layui框架实战案例(3)：layui上传错误请求上传接口出现异常解决方案layui框架实战案例(9)：layPage 静态数据分页组件layui框架实战案例(10)：短信验证码60秒倒计时layui框架实战案例(11)：表单自定义验证规则layui框架实战案例(12)：layui标签输入框inputTaglayui框架实战案例(13)：colorpicker颜色选择器的使用layui框架实战案例(14)：tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案layui框架实战案例(15)：上传提示413 request entity too large宝塔配置的解决方案layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）layui框架实战案例(17)：流加载文档layui.flow组件的前后端解决方案layui实现定位、查询数据以及select筛选的组合功能layui多文件上传与PHP后端对接的解决方案layui内部表单互动的实战案例：根据radio单选框自动改变input内容layui复选框checkbox全选和获取值的解决方案layui和weui结合手机端select表单底部选择和被遮挡的解决方案文章目录系列文章目录@[TOC](文章目录) 前言一、HTML容器二、php后端API数据1.核心代码2.参数过滤3.权限判断4.获取总记录三、table模块渲染1.加载layui2.筛选条件select表单加载3.表格渲染核心代码照片显示隐私加密 4.触发事件事件判断事件判断 5.执行重载6.操作按钮总结前言

在这里插入图片描述 table 是 layui 中使用频率非常高的一个组件，用于在表格中对数据进行一系列动态化的操作，涵盖了日常业务所涉及的大部分需求。

模块加载名称：table在实际开发应用中，table的使用牵涉前后端的配合使用，如筛选查询重载功能，翻页功能等。一、HTML容器查询条件表单报名状态未报名已报名已审核缴费状态未缴费已缴费查询 {if $smarty.cookies.admin_menu eq "1"} 导入用户信息导入缴费信息导入考试信息 {/if} 表格容器二、php后端API数据 1.核心代码 public function getUser() { global $CONF_TABLE, $db, $res; dbc(); @$user_work = get_param("user_work"); @$user_class = get_param("user_class"); @$user_name = get_param("user_name"); @$user_ticket = get_param("user_ticket"); @$user_verify = get_param("user_verify"); @$user_pay = get_param("user_pay"); @$p = get_param('page') == "" ? 1 : get_param('page'); @$pagesize = get_param('limit') == "" ? 15 : get_param('limit'); @$limit = ($p - 1) * $pagesize; //按学院权限设置筛选条件; if ($_COOKIE['admin_menu'] == 1) {//超级管理员 $filter_condition = " 1"; } elseif ($_COOKIE['admin_menu'] == 0) {//学院管理员 $filter_condition = " user_work = '" . $_COOKIE['admin_depart'] . "'"; } else {//禁止查询 $filter_condition = " 1 = 2"; } /*用户分表 By Poleung 2023-02-26*/ $current_table = "user_" . $CONF_TABLE['current_table']; $sql = "select user_id,user_ticket,user_name,user_gender,user_nation,user_card,user_phone,user_work,user_class,user_photo,user_verify,user_pay,user_sms,user_cet FROM " . $db->table($current_table) . " WHERE " . $filter_condition; if ($user_ticket != "") { $sql .= " AND user_ticket like '%" . $user_ticket . "%'"; } if ($user_name != "") { $sql .= " AND user_name like '%" . $user_name . "%'"; } if ($user_work != "") { $sql .= " AND user_work like '%" . $user_work . "%'"; } if ($user_class != "") { $sql .= " AND user_class like '%" . $user_class . "%'"; } if ($user_verify != "") { $sql .= " AND user_verify = " . $user_verify; } if ($user_pay != "") { $sql .= " AND user_pay = " . $user_pay; } $sql .= " ORDER BY user_verify DESC,user_id DESC LIMIT " . $limit . "," . $pagesize; $row = $db->queryall($sql); //获取总记录; $sql_c = "select user_id FROM " . $db->table($current_table) . " WHERE " . $filter_condition; if ($user_ticket != "") { $sql_c .= " AND user_ticket like '%" . $user_ticket . "%'"; } if ($user_name != "") { $sql_c .= " AND user_name like '%" . $user_name . "%'"; } if ($user_work != "") { $sql_c .= " AND user_work like '%" . $user_work . "%'"; } if ($user_class != "") { $sql_c .= " AND user_class like '%" . $user_class . "%'"; } if ($user_verify != "") { $sql_c .= " AND user_verify = " . $user_verify; } if ($user_pay != "") { $sql_c .= " AND user_pay = " . $user_pay; } $sql_c .= " ORDER BY user_verify DESC,user_id DESC"; $row_c = $db->queryall($sql_c); /*信息输出*/ $res['code'] = 0; $res['msg'] = 0; $res['count'] = count($row_c); $res["data"] = $row; die(json_encode_lockdata($res)); } 2.参数过滤

由于前端传递参数使用get方式，便于筛选和查询，但是也存在着SQL注入漏洞，因此使用get_param()函数对参数进行安全过滤，具体封装参数不做展示，根据自己系统需要增加即可。

@$user_work = get_param("user_work"); @$user_class = get_param("user_class"); @$user_name = get_param("user_name"); @$user_ticket = get_param("user_ticket"); @$user_verify = get_param("user_verify"); @$user_pay = get_param("user_pay"); @$p = get_param('page') == "" ? 1 : get_param('page'); @$pagesize = get_param('limit') == "" ? 15 : get_param('limit'); 3.权限判断

后台角色权限分为超级管理员和学院管理员，为了展示对应的数据，做好限设置筛选条件。

//按学院权限设置筛选条件; if ($_COOKIE['admin_menu'] == 1) {//超级管理员 $filter_condition = " 1"; } elseif ($_COOKIE['admin_menu'] == 0) {//学院管理员 $filter_condition = " user_work = '" . $_COOKIE['admin_depart'] . "'"; } else {//禁止查询 $filter_condition = " 1 = 2"; } 4.获取总记录

在使用table模块翻页时，需要传递总页码，因此在后端开发时，单独增加一个数据记录的SQL查询语句。

$res['count'] = count($row_c); 三、table模块渲染 1.加载layui layui.use(['table', 'layer', 'form'], function () { var $ = layui.jquery,form = layui.form,table = layui.table; //核心代码 }); 2.筛选条件select表单加载

在这里插入图片描述为了便于后台筛选操作，在layui中异步调用函数，快速下拉查询；同时设置lay-search属性，支持下拉和输入查询。

//获取学院; getBigCategory(); getSubCategory('', ''); form.on("select(major_name)", function () { var major_id = $("#major_name").val().split(',')[0]; //console.log(major_id); getSubCategory(major_id,''); }); 3.表格渲染核心代码 //表格渲染; table.render({ elem: '#lockTabel' , url: './api/api.php?act=getUser&token=3cab7ce4142608c0f40c785b5ab5ca24' , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] , limits: [15,30, 50, 100, 200, 500, 1000] , limit: 15 , toolbar: '#toolbarDemo' ,defaultToolbar: ['filter','exports', 'print'] , even: true , page: true , id: 'searchTable' , cols: [[ {type: 'checkbox',width: 100} , {field: 'user_photo', title: '证件照', align: 'center', templet: function (d) { if(d.user_photo == null || d.user_photo == ""){ return '

'; }else{ return '

'; } } } , {field: 'user_ticket', title: '学号', sort: true} , {field: 'user_name', title: '姓名', sort: true} , {field: 'user_work', title: '学院', sort: true} , {field: 'user_class', title: '班级', sort: true} , {field: 'user_nation', title: '民族', sort: true, hide:true} , {field: 'user_gender', title: '性别', sort: true, hide:true} , {field: 'user_phone', title: '手机号码', sort: true,templet: function (d) { return getPhone(d.user_phone)+ "\t"; }} , {field: 'user_cet', title: '证件类型', sort: true, hide:true} , {field: 'user_card', title: '证件号码', sort: true,templet: function (d) { return getIdHide(d.user_card); }} , {field: 'user_verify', title:'报名状态', sort: true, templet: function (d) { switch (d.user_verify) { case "0": return "未报名"; break; case "1": return "已报名"; break; case "2": return "已审核"; break; } } } , {field: 'user_pay', title:'缴费状态', sort: true, templet: function (d) { switch (d.user_pay) { case "0": return "未缴费"; break; case "1": return "已缴费"; break; } } } , {field: 'lock', title: '操作', templet: '#checkboxTpl', width:300, align: 'center'} ]] , error: function(res, err){ //如果是异步请求数据方式，res即为你接口返回的信息。 //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度 console.log(res); //得到当前页码 console.log(err); } }); 照片显示

为了图片完整的显示，需要添加对应的CSS样式表，并设置为优先。

.layui-table-cell { height: auto; line-height: 20px; } .layui-table-cell img { height: 50%; max-width: 50%; }

证件照字段调用，同时对是否包含照片进行条件判断，防止无图导致的非友好化界面。

{field: 'user_photo', title: '证件照', align: 'center', templet: function (d) { if(d.user_photo == null || d.user_photo == ""){ return '

'; }else{ return '

'; } } } 隐私加密 {field: 'user_card', title: '证件号码', sort: true,templet: function (d) { return getIdHide(d.user_card); }}

封装函数

//身份证加密 function getIdHide(idCard) { if (idCard == null) { return ''; } else { const temp = idCard.substr(4, 10) const newIdCard = idCard.replace(temp, '*******') return newIdCard; } } 4.触发事件事件判断 //触发事件 table.on('toolbar(lockTabel)', function (obj) { var checkStatus = table.checkStatus(obj.config.id); switch (obj.event) { case 'delete': var data = checkStatus.data; var arr = []; for (var i = 0; i arr.push(data[i].user_id) } //console.log(arr); //删除选中数据; sendSms(arr); break; case "sendVerify": var data = checkStatus.data; var arr = []; for (var i = 0; i var lock = false; layer.confirm('确认要删除吗？', function (index) { if(!lock) { if (data.length == 0){ layer.msg('未选择用户', {icon: 1, time: 1000}); return false; } lock = true; $.ajax({ type: "get", url: "?m=User&a=userDeal&act=del", async: true, data: { user_id: data }, dataType: "text", success: function (data) { layer.msg(data + '删除成功', {icon: 1, time: 1000}); location.replace(location.href); } }); } }); }

后端处理

case "del"; $user_id = get_param('user_id'); if (is_array($user_id)) { $user_id = implode(",", $user_id); } if ($user_id == '') { die("user_id错误"); } //删除; $db->delete($current_table, 'user_id in (' . $user_id . ')'); //操作日志; addlogs($_COOKIE["admin_name"], '报名信息批量删除，STATUS:OK', '', time(), getip()); break; 一键审核 //一键审核; function sendVerify(data) { var lock = false; layer.confirm('确认要审核吗？', function (index) { if(!lock) { if (data.length == 0){ layer.msg('未选择用户', {icon: 1, time: 1000}); return false; } lock = true; $.ajax({ type: "post", url: "?m=User&a=userDeal&act=sendVerify", async: true, data: { user_id: data }, dataType: "json", success: function (res) { if(res.code == 0){ layer.msg(res.msg, {icon: 1, time: 1000}); }else{ layer.msg(res.msg, {icon: 1, time: 1000},function (){ location.replace(location.href); }); } } ,error: function (err){ console.log(err) } }); } }); }

后端处理

//一键审核; case "sendVerify"; $user_id = $_POST['user_id']; //var_dump($user_id); if (is_array($user_id)) { //循环发送信息; for ($i = 0; $i $row = $db->fetch($current_table, 'user_name,user_sms,user_phone', array('user_id' => $user_id), ' user_id DESC'); $db->update($current_table, array('user_verify' => 2), array('user_id' => $user_id)); $res['code'] = 1; $res['msg'] = $row['user_name'] . "报名审核成功"; die(json_encode_lockdata($res)); } break; 群发短信 //发送短信; function sendSms(data) { if (data.length == 0){ layer.msg('未选择用户', {icon: 1, time: 1000}); return false; } $.ajax({ type: "post", url: "?m=User&a=userDeal&act=sendSms", async: true, data: { user_id: data }, dataType: "json", success: function (res) { if(res.code == 0){ layer.msg(res.msg, {icon: 1, time: 1000}); }else{ layer.msg(res.msg, {icon: 1, time: 1000},function (){ location.replace(location.href); }); } } ,error: function (err){ console.log(err) } }); return false; }

后端处理

//发送短信; case "sendSms"; $user_id = $_POST['user_id']; //var_dump($user_id); if (is_array($user_id)) { //循环发送信息; for ($i = 0; $i $res['code'] = 0; $res['msg'] = $row['user_name'] . "手机号码有误，无法发送"; die(json_encode_lockdata($res)); } //发送短信 TODO //更新发送短信次数 $user_sms = $row['user_sms'] + 1; $db->update($current_table, array('user_sms' => $user_sms), array('user_id' => $user_id[$i])); } $res['code'] = 1; $res['msg'] = "短信发送成功"; die(json_encode_lockdata($res)); } else { $row = $db->fetch($current_table, 'user_name,user_sms,user_phone', array('user_id' => $user_id), ' user_id DESC'); if ($row['user_phone'] == NULL || $row['user_phone'] == "") { $res['code'] = 0; $res['msg'] = $row['user_name'] . "手机号码有误，无法发送"; die(json_encode_lockdata($res)); } //发送短信 TODO //更新发送短信次数 $user_sms = $row['user_sms'] + 1; $db->update($current_table, array('user_sms' => $user_sms), array('user_id' => $user_id)); $res['code'] = 1; $res['msg'] = $row['user_name'] . ",短信发送成功"; die(json_encode_lockdata($res)); } break; 5.执行重载

在筛选框中对应的表单，将相应的值获取，传递给API，进行筛选后查询。

//执行重载; var $ = layui.$, active = { reload: function () { table.reload('searchTable', { page: {curr: 1} , where: { user_work: $("#major_name").val().split(',')[1], user_class: $("#sub_name").val(), user_verify: $('#user_verify').val(), user_pay: $('#user_pay').val(), user_name: $('#user_name').val(), user_ticket: $('#user_ticket').val() } }); } }; $('.demoTable .layui-btn').on('click', function () { var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); 6.操作按钮

使用table模块中id="checkboxTpl"和id="toolbarDemo"对应的位置调用按钮即可。

{if $smarty.cookies.admin_menu eq "1"} {literal}

【本文地址】

公司简介

联系我们